<!-- 试卷table -->
<script setup lang="ts">
import { defineProps, reactive, inject, computed } from 'vue';
import { ElButton, ElMessageBox } from "element-plus"
import dayjs from 'dayjs';
import { Eye, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';
import { useMessageBox } from '#/hooks/useMessageBox';
import PreviewDialog from './preview-dialog.vue'
import CustomPopover from '#/components/custom-popover.vue';
import { isNumber } from '@vben/utils';

defineOptions({ name: 'Cards' });
defineProps({
  tableList: Array<any>
})

const { confirm: confirmSubmit } = useMessageBox({})
const { deletePaperData } = inject('dealTableData') as any;
const preDialogData = reactive({
  dialogVisible: false,
  paperId: '',
  papersName: ''
})

const openPreview = (data: any) => {
  console.log(data)
  preDialogData.dialogVisible = true
  preDialogData.paperId = data?.papersId
  preDialogData.papersName = data?.papersName
}


const deleteExam = (data: any) => {
  const message = $t('paper.deletePaperConfirmTxt');
  confirmSubmit(message).then(() => {
    deletePaperData(data?.papersId)
  }).catch(() => {
  })
}
const totalScoreStyle = computed(() => {
  return (score: any) => {
    if (score === null || score === undefined || score === '') {  
      return '--'
    }
    return isNumber(+score) ? (+score).toFixed(0) : score
  }
})

</script>
<template>
  <div>
    <el-table :header-row-class-name="() => 'custom-header'" :data="tableList" height="100%">
      <el-table-column header-align="center" align="center" min-width="48" type="index" :label="$t('common.numberIdxTxt')"></el-table-column>
      <el-table-column prop="papersName" :label="$t('paper.paperNameTxt')" min-width="380">
        <template #default="{ row }">
          <CustomPopover :strTxt="row.papersName ?? '--'"></CustomPopover>
        </template>
      </el-table-column>
      <el-table-column prop="totalQuestions" :label="$t('paper.totalQuestionsTxt')" min-width="164" />
      <el-table-column prop="totalScore" :label="$t('paper.totalScoreTxt')" min-width="164">
        <template #default="{ row }">
          <div>{{ totalScoreStyle(row?.totalScore) }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.createTimeTxt')" min-width="200">
        <template #default="{ row }">
          <div>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('common.operationTxt')" min-width="81">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="$t('common.previewTxt')" placement="top">
            <el-button link @click="openPreview(row)" :icon="Eye"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" :content="$t('common.deleteTxt')" placement="top">
            <el-button link @click="deleteExam(row)" :icon="Trash2"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <PreviewDialog v-model:model-value="preDialogData"></PreviewDialog>
  </div>
</template>
